<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>专家个人中心</title>
    <link rel="stylesheet" href="/web/layui/css/layui.css">
    <link rel="stylesheet" href="/web/font/css/font-awesome.css">
    <style>
        body{
            margin: 0;
            padding: 0;
            background: #f8f8f8;
        }
        /*专家顶部的信息展示 start*/
        .expert-desc{
            background: #FFD946;
            width: 100%;
            height: 170px;
        }
        .expert-desc .cont{
            display: flex;
            padding-top: 35px;
            border-radius: 5px;
        }
        .expert-desc .face{
            width: 90px;
        }
        .expert-desc img{
            width: 60px;
            height: 60px;
            margin: 10px 10px 8px;
            border-radius: 50%;
            border: 1px solid gainsboro;
        }
        .expert-desc .follow{
            width: 60px;
            height: 25px;
            line-height: 25px;
            font-size: 14px;
            margin: 0 10px;
            border-radius: 20px;
            background: #db3638;
            color: #ffffff;
            text-align: center;
        }
        .expert-desc .follow.active{
            background:#d0d0d0;
        }
        .expert-desc .desc{
            margin: 5px 0;
            width: 75%;
        }
        .expert-desc .name-cont{
            padding: 0 0 10px;
            display: flex;
            position: relative;
        }
        .expert-desc .name{
            font-size: 20px;
            width: 60px;
            font-weight: bold;
        }
        .expert-desc .icon i{
            font-size: 18px;
            position: absolute;
            right: 10px;
            top: 5px;
        }
        .expert-desc .name-position{
            font-size: 14px;
            padding: 4px 0 0 19px;
            width: 60%;
        }
        .expert-desc .strengths .position{
            font-size: 14px;
            margin-bottom: 7px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        /*专家的个人信息介绍 end*/

        /*操作项 start*/
        .op-part{
            width: 90%;
            margin:0 auto 15px;
            border-radius: 5px;
            background: #ffffff;
        }
        .op-part .title{
            padding: 10px 20px 10px;
            font-size:18px;
            font-weight: bold;
        }
        .op-part .line3 img{
            width: 50px;
            height: 50px;
        }
        .op-part .line4 img{
            width: 40px;
            height: 40px;
        }
        .op-part .param{
            text-align: center;
            padding-top: 10px;
            padding-bottom: 10px;
        }
        .op-part .line4 .param{
            padding-bottom: 20px;
        }
        .op-part .icon{
            padding-bottom: 7px;
        }
        /*操作项 end*/
    </style>
</head>
<body>
{{--专家的个人信息介绍 start--}}
<div class="expert-desc">
    <div class="cont">
        <div class="face">
            <img src="/logo.png" class="img-enlarge">
        </div>
        <div class="desc">
            <div class="name-cont">
                <div class="name">庞继光</div>
                <div class="name-position">主任医师</div>
                <div class="icon"><i class="fa fa-qrcode"></i></div>
            </div>
            <div class="strengths" style="position: relative;">
                <div class="position">简介：北京东城中医医院专家</div>
                <div class="position">主治：颈椎病，颈椎病，颈椎病，颈椎病等</div>
            </div>
        </div>
    </div>
</div>
{{--专家的个人信息介绍 end--}}

{{--操作项目盒子 start--}}
<div class="op-part" style="margin-top: -30px;">
    <div class="layui-row line3">
        <div class="param layui-col-xs4 layui-col-sm4">
            <div class="icon"><img src="/back.png" alt=""></div>
            <div class="name">收入</div>
        </div>
        <div class="param layui-col-xs4 layui-col-sm4">
            <div class="icon"><img src="/back.png" alt=""></div>
            <div class="name">收入</div>
        </div>
        <div class="param layui-col-xs4 layui-col-sm4">
            <div class="icon"><img src="/back.png" alt=""></div>
            <div class="name">收入</div>
        </div>
    </div>
</div>

{{--服务信息--}}
<div class="op-part">
    <div class="title">服务信息</div>
    <div class="layui-row line4">
        <div class="param layui-col-xs3 layui-col-sm3">
            <div class="icon"><img src="/back.png" alt=""></div>
            <div class="name">收入</div>
        </div>
        <div class="param layui-col-xs3 layui-col-sm3">
            <div class="icon"><img src="/back.png" alt=""></div>
            <div class="name">收入</div>
        </div>
        <div class="param layui-col-xs3 layui-col-sm3">
            <div class="icon"><img src="/back.png" alt=""></div>
            <div class="name">收入</div>
        </div>
    </div>
</div>


{{--服务信息--}}
<div class="op-part">
    <div class="title">服务信息</div>
    <div class="layui-row line4">
        <div class="param layui-col-xs3 layui-col-sm3">
            <div class="icon"><img src="/back.png" alt=""></div>
            <div class="name">收入</div>
        </div>
        <div class="param layui-col-xs3 layui-col-sm3">
            <div class="icon"><img src="/back.png" alt=""></div>
            <div class="name">收入</div>
        </div>
        <div class="param layui-col-xs3 layui-col-sm3">
            <div class="icon"><img src="/back.png" alt=""></div>
            <div class="name">收入</div>
        </div>
    </div>
</div>


{{--服务信息--}}
<div class="op-part">
    <div class="title">服务信息</div>
    <div class="layui-row line4">
        <div class="param layui-col-xs3 layui-col-sm3">
            <div class="icon"><img src="/back.png" alt=""></div>
            <div class="name">收入</div>
        </div>
        <div class="param layui-col-xs3 layui-col-sm3">
            <div class="icon"><img src="/back.png" alt=""></div>
            <div class="name">收入</div>
        </div>
        <div class="param layui-col-xs3 layui-col-sm3">
            <div class="icon"><img src="/back.png" alt=""></div>
            <div class="name">收入</div>
        </div>
    </div>
</div>
{{--操作项目盒子 end--}}
</body>
</html>
